@extends('admin.public.header')
@section('title','编辑运费规则')
<style>
    .layui-tree-set {
        width: 50% !important;
        position: relative;
        float: left !important;
    }
    .layui-tree-pack .layui-tree-set {
        width: 100% !important;
        position: relative;
    }
    .modal-footer {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        /* -webkit-box-pack: end; */
        /* -webkit-justify-content: flex-end; */
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding: 15px;
        border-top: 1px solid #eceeef;
    }
    .layui-layer-btn0{
        background-color: #1E9FFF !important;
        color: #fff !important;
    }
    .layui-btn+.layui-btn {
         margin-left: 0px !important;
    }
</style>
@section('listcontent')
    <div class="layui-tab-content">
        <form class="layui-form">
            <div class="layui-form layuimini-form">
                <input type="hidden" name="id" value="{{ $info->id ?? '' }}">
                <div class="layui-form-item">
                    <label class="layui-form-label required">包邮金额</label> 
                    <div class="layui-input-block">
                        <input type="number" name="price" lay-verify="required" lay-reqtext="包邮金额不能为空" placeholder="请输入包邮金额" value="{{ $info->price ?? '0.00' }}" class="layui-input"> 
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">运费规则</label>
                    
                    <div class="layui-input-block" style="width:60%;" id="reuls">
                        @if($info != '')
                            <div class="layui-col-md6" style="width:100%;margin-top:10px;">
                                <div class="layui-panel" style="padding: 10px;" >
                                    <a style="float: right;margin-top: 15px;" class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue rules"><i class="layui-icon layui-icon-edit"></i>编辑条目</a>
                                    <div class="layui-form-item layui-form-text">
                                        <span>省份：</span>
                                        <div class="layui-input-block" style="margin-left: 0px;">
                                        @foreach($info->city as $key => $v)
                                            <span class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top: 10px;">
                                                <span>{{ $v['name'] }}</span>
                                                <input type="hidden" name="city[{{ $key }}][id]" value="{{ $v['id'] }}">
                                                <input type="hidden" name="city[{{ $key }}][name]" value="{{ $v['name'] }}">
                                            </span>
                                        @endforeach
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                @if(!($info->id ?? 0))
                <div class="layui-form-item delete-reuls">
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue rules"><i class="layui-icon layui-icon-add-1"></i>新增条目</a>
                    </div>
                </div>
                @endif
            </div>
            <div class="hr-line"></div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" id="saveBtn" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 添加包邮规则 -->
    <div class="layui-form layuimini-form" id="exampleModal" style="display:none">
        <div class="layui-form-item" style="margin-top: 15px;">
            <div class="layui-input-block">
                <div id="roleTree" class="demo-tree"></div>
            </div>
        </div>
    </div>
@endsection

@section('listscript')
    <script type="text/javascript">
        layui.use(['layer','form','tree','util'], function () {
            var layer = layui.layer, form = layui.form,
            $=layui.jquery ,tree = layui.tree ,
            util = layui.util;
           
            form.on('submit(saveBtn)', function(data){
                var loading = layer.msg('加载中..', {icon: 16,shade: 0.3,time: false});
                $.ajax({
                    url:'/admin/free_delivery_rules/edit',
                    type:'post',
                    data:data.field,
                    dataType:"JSON",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success:function(res){
                        layer.close(loading);  //返回数据关闭loading
                        if(res.code == 0){
                            layer.msg(res.message,{icon: 1},function(){
                                setTimeout('parent.location.reload()',500);
                            });
                            
                        }
                        else{
                            layer.msg(res.message,{icon: 2});
                        }
                    },
                    error:function(e){
                        layer.msg("提交失败",{icon: 2});
                    },
                    
                });
                return false;
            });
            
            //新增规则条目
            $(document).on('click','.rules',function(){
                var type = $('input[name=type]:checked').val();
                var index = layer.open({
                    title: '添加包邮规则',
                    type: 1,
                    btn: ['确 认','取 消'],
                    shade: 0.2,
                    anim: 1,
                    maxmin:true,
                    shadeClose: true,
                    area: ['55%', '75%'],
                    skin: 'layui-layer-lan',
                    content: $("#exampleModal"),
                    success: function (){
                        
                        // 加载
                        var loading = layer.msg('加载中..', {icon: 16,shade: 0.3,time: false});
                        //渲染树状
                        $.ajax({
                            url:'/admin/free_delivery_rules/getArea',
                            type:'get',
                            data:{},
                            dataType:'JSON',
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                            success:function(res){
                                layer.close(loading);
                                if(res.code == 0){
                                    var role_auth = res.data.list;
                                    var demo = tree.render({
                                        elem: '.demo-tree'
                                        ,data: role_auth
                                        ,id: 'treeId'
                                        ,showCheckbox: true  //是否显示复选框
                                        ,click: function(obj){
                                            var data = obj.data;  //获取当前点击的节点数据
                                            layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                                        }
                                    });
                                }else{
                                    layer.msg(res.message,{icon: 2});
                                }
                            },
                            error:function (data) {
                                layer.msg(res.message,{icon: 2});
                            }
                        });
                    },
                    yes: function(index, layero){
                        //do something
                        
                        var checkedData = tree.getChecked('treeId');
                        
                        if(checkedData == ''){
                            layer.msg('请勾选省市',{icon: 2});
                            return false;
                        }
                        var html = '';
                        var keys = 0;
                        
                        html += '<div class="layui-col-md6" style="width:100%;margin-top:10px;">'
                        html +=     '<div class="layui-panel" style="padding: 10px;" >'
                        
                        html +=         '<a style="float: right;margin-top: 15px;" class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue rules"><i class="layui-icon layui-icon-edit"></i>编辑条目</a>'
                        html +=         '<div class="layui-form-item layui-form-text">'
                        html +=         '   <span>省份：</span>'
                        html +=         '   <div class="layui-input-block" style="margin-left: 0px;">'
                        $.each(checkedData, function (index, item) {
                            if (item.children != null) {
                                $.each(item.children, function (key, val) {
                                    
                                    html +=         '       <span class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top: 10px;">'
                                    html +=         '           <span>'+val.title+'</span>'
                                    html +=         '           <input type="hidden" name="city['+keys+'][id]" value="'+val.id+'">'
                                    html +=         '           <input type="hidden" name="city['+keys+'][name]" value="'+val.title+'">'
                                    html +=         '       </span>'
                                    keys++;
                                });
                                
                            }
                        });
                        html +=         '   </div>'
                        html +=         '</div>'
                        html +=     '</div>'
                        html += '</div>'

                        $('#reuls').html(html);
                        $(".delete-reuls").hide();
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            });
        });
    </script>
@endsection

